<template>
  <el-row class="tag" :gutter="10">
    <client-only>
      <el-skeleton :animated="true" :loading="tag_loading" :rows="0" :throttle="200">
        <template slot="template">
          <el-col class="item-col" :xs="6" :sm="4" :md="2" :lg="col" v-for="(item,index) in 48" :key="index">
            <div class="tag-item"><el-skeleton-item variant="p" style="width: 100%; height: 20px" /></div>
          </el-col>
        </template>
        <template>
          <el-col class="item-col" :xs="6" :sm="4" :md="2" :lg="col" v-for="(item,index) in tagList" :key="index">
            <el-tooltip effect="dark" :content="item.labelName" placement="top">
              <div :class="'tag-item text-center fs-12 overflow_omit pointer ' + tagClass[index]" @click="goTag(item.labelName)">{{ item.labelName }}</div>
            </el-tooltip>
          </el-col>
          <el-col :span="24" v-if="tagList.length === 0">
            <el-empty :image-size="200" description="暂无数据"></el-empty>
          </el-col>
        </template>
      </el-skeleton>
    </client-only>
  </el-row>
</template>

<script>
export default {
  data(){
    return{
      //标签样式
      tagClass: ["tag-gray","tag-red","tag-red-2","tag-yellow","tag-yellow-2","tag-blue","tag-blue-2","tag-cyan","tag-green","tag-green-2","tag-purple","tag-purple-2"],
      //标签列表
      tagList: [],
      tag_loading: true
    }
  },
  props:{
    //栅栏布局
    col: {
      type: Number,
      default: 8
    },
    //pageNum
    pageNum: {
      type: Number,
      default: 1
    },
    //listSize
    listSize: {
      type: Number,
      default: 12
    }
  },
  mounted() {
    this.getLabelList();
  },
  methods: {
    getLabelList(){
      this.$api_label.getList(this.listSize, this.pageNum).then(res => {
        if(res.code === 200){
          this.tag_loading = false;
          this.tagList = res.rows;
          this.tagClassToTagList();
        }
      });
    },
    goTag(name) {
      this.$router.push("/classify?tag=" + name);
    },
    more() {
      this.$router.push("/tag");
    },
    //标签样式同步标签的数量
    tagClassToTagList() {
      for (let i = 0; i < this.tagList.length; i++) {
        //打乱排序
        this.tagClass = this.shuffle(this.tagClass);
        let index = this.tagList.length - this.tagClass.length;
        for (let j = 0; j < index; j++) {
          this.tagClass.push(this.tagClass[j]);
        }
      }
    },
    //数组随机排序
    shuffle(arr) {
      let i = arr.length;
      while (i) {
        let j = Math.floor(Math.random() * i--);
        [arr[j], arr[i]] = [arr[i], arr[j]];
      }
      return arr;
    }
  }
}
</script>

<style scoped>
.tag{
  margin-top: -5px;
}
.item-col{
  margin-top: 5px;
}
.tag-item{
  padding: 8px 5px;
  border-radius: 14px;
  width: 70px;
}
</style>
